<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less"/>
    <link rel="stylesheet/less" href="./less/shippingAddress.less"/>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script src="./js/city.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">添加收货地址</div>
                    <div @click="returnAddress">
                        <img src="./img/arrow_back.png">
                    </div>
                </header>
            </div>
            <div class="address">
                <div>
                    <input type="text" placeholder="收货人姓名" v-model = "userconsignee">
                </div>
                <div>
                    <input type="text" placeholder="手机号码" v-model = "userphone">
                </div>
                <div>
                    <input type="text" placeholder="邮政编码" v-model = "usercoding">
                </div>
            </div>
            <div class="address">
                <div @click = "picker" v-show = "status">省、市、区</div>
                <div v-show = "!status" @click = "picker">{{city[0]}}-{{city[1]}}-{{city[2]}}</div>
            </div>
            <div class="address">
                <div>
                    <textarea class="textarea" rows="3" cols="35" type="text" placeholder="详细地址" v-model = "detailedAddress"></textarea>
                </div>
            </div>
            <div class="address">
                <ul>
                    <li>设为默认地址</li>
                    <li>
                        <input class="weui-switch" type="checkbox" @click="changeStatus(checkboxStatus)"/>
                    </li>
                </ul>
            </div>
            <div class="submit" @click="submit">保存</div>
            <div id="toast" v-show="totasStatus">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                    <p class="weui-toast__content">添加成功</p>
                </div>
            </div>
            <div id="textToast" v-show="tooltip">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast weui-toast_text">
                    <p class="weui-toast__content">{{tooltipName}}</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="module">
    import { addShoppingAddress } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
    let app = new Vue({
        el: '#app',
        data: {
            userconsignee: '',
            userphone: '',
            usercoding: '',
            city:[],
            provinceId: '',
            cityId: '',
            areaId: '',
            checkboxStatus: false,
            status: true,
            detailedAddress: '',
            tooltip: false,
            totasStatus: false,
            tooltipName: '',
            inviteCode: ''
        },
        mounted(){
            let that = this;
                that.public.shareLink();
        },
        methods:{
            picker(){
                let that = this;
                weui.picker(cityData, {
                    defaultValue: [110000, 110000, 110101],
                    depth: 3,
                    onChange: function (result) {
                        
                    },
                    onConfirm: function (result) {
                        console.log(result[0].value);
                        let city = [];
                        if(result){
                            city.push(result[0].label);
                            city.push(result[1].label);
                            city.push(result[2].label);
                            that.city = city;
                            that.provinceId = result[0].value;
                            that.cityId =  result[1].value;
                            that.areaId =  result[2].value;
                            that.status = false;
                        }
                    },
                    title: '城市区县'
                });
            },
            changeStatus(checkboxStatus){
                let that = this;
                    that.checkboxStatus = !checkboxStatus;
            },
            returnAddress(){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                    if(query.addressManagementStatus){
                        let url = "./addressManagement.html?addressStatus="+that.addressStatus+"&goodsId="+query.goodsId+"&goodsImage="+query.goodsImage+"&goodsName="+query.goodsName+"&buyingPrice="+query.buyingPrice+"&spec="+query.spec+"&addressManagementStatus="+query.addressManagementStatus+"&type="+query.type;
                            window.location.href = url;
                    }else{
                       
                        window.location.href='./addressManagement.html?type='+query.type;
                    }
            },
            submit(){
                    let that = this;
                    if(that.userconsignee == ''){
                            that.tooltip = true;
                            that.tooltipName = '收货人姓名不能为空';  
                            setTimeout(()=>{
                                that.tooltip = false;
                            },2000)
                            return false;
                    }else if(that.userphone == ''){
                            that.tooltip = true;
                            that.tooltipName = '手机号码不能为空';  
                            setTimeout(()=>{
                                that.tooltip = false;
                            },2000)
                            return false;
                    }else if(!(/^1[3|4|5|7|8|9]\d{9}$/.test(that.userphone))){ 
                            that.tooltip = true;
                            that.tooltipName = '手机号输入错误';  
                            setTimeout(()=>{
                                that.tooltip = false;
                            },2000)
                            return false; 
                        }else if(that.usercoding == ''){
                            that.tooltip = true;
                            that.tooltipName = '邮政编码不能为空';  
                            setTimeout(()=>{
                                that.tooltip = false;
                            },2000)
                            return false;
                    }else if(!/^[a-zA-Z0-9 ]{3,12}$/.test(that.usercoding)){
                            that.tooltip = true;
                            that.tooltipName = '请输入正确的邮政编码';  
                            setTimeout(()=>{
                                that.tooltip = false;
                            },2000)
                            return false;
                    }else if(that.detailedAddress == ''){
                            that.tooltip = true;
                            that.tooltipName = '详细地址不能为空';  
                            setTimeout(()=>{
                                that.tooltip = false;
                            },2000)
                            return false;
                    }else{
                        let userData = JSON.parse(localStorage.getItem("userData"));
                            that.inviteCode = userData.userId;
                            addShoppingAddress({
                                userId: that.inviteCode,
                                person: that.userconsignee,
                                phone: that.userphone,
                                postcode: that.usercoding,
                                area: that.city.toString(),
                                status: that.checkboxStatus?0:1,
                                provinceId: that.provinceId,
                                cityId: that.cityId,
                                areaId: that.areaId,
                                address: that.detailedAddress,
                            }).then( (res) =>{
                            if(res.code==0){
                                that.totasStatus = true;
                                console.log(res.data);
                                let query = Qs.parse(location.search.substring(1));
                                if(query.addressManagementStatus){
                                    let url = "./addressManagement.html?addressStatus="+that.addressStatus+"&goodsId="+query.goodsId+"&goodsImage="+query.goodsImage+"&goodsName="+query.goodsName+"&buyingPrice="+query.buyingPrice+"&spec="+query.spec+"&addressManagementStatus="+query.addressManagementStatus+"&type="+query.type;
                                    setTimeout(()=>{
                                        window.location.href = url;
                                    },2000)
                                }else{
                                    setTimeout(()=>{
                                        window.location.href='./addressManagement.html?type='+query.type;
                                    },2000)
                                }
                            }
                        }).catch( (error) => {
                        console.log(error);
                    });    
                }
            },
        },
    })
</script>